<template>
  <div class="historicalRecord">
    <div class="content_box">
      <!-- 顶部统计条 -->
      <div class="action_bar">
        <div></div>
        <div class="quantity">
          <span>{{ $t('activity.resgatar.quantity_label') }}</span>
          <span>&nbsp; {{ apo.utils.formatAmount(totalAward) }} {{ apo.config.getCurrencyName() }}</span>
        </div>
      </div>
      <!-- 表头：时间 / 奖金 -->
      <div class="tab_column">
        <div>{{ $t('activity.resgatar.header_time') }}</div>
        <div>{{ $t('activity.resgatar.header_bonus') }}</div>
      </div>
      <!-- 列表区域 -->
      <div class="list">
        <!-- 空数据提示 -->
        <div v-if="total === 0" class="no_data">{{ $t('activity.resgatar.no_record') }}</div>
        <ul>
          <!-- 历史记录行 -->
          <li v-for="row in showList" :key="row.id">
            <div>{{ apo.utils.formatDate(row.receive_at || 0, 'YYYY-MM-DD HH:mm:ss') }}</div>
            <div>{{ apo.utils.formatAmount(row.award) }} {{ apo.config.getCurrencyName() }}</div>
          </li>
        </ul>
      </div>
      <!-- 分页控件 -->
      <div class="paging">
        <div class="prev" @click="changePage(-1)">
          <van-icon name="arrow-left"></van-icon>
        </div>
        <div class="txt">{{ pageInfo.page }}/{{ maxPage }}</div>
        <div class="next" @click="changePage(1)">
          <van-icon name="arrow"></van-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 属性声明（保持运行时一致，仅加类型提升编辑体验）
const props = defineProps<{ historyList: Array<{ id: string | number; receive_at?: number; award: number }> }>()

// 分页信息
const pageInfo = reactive({
  page: 1,
  size: 8,
})
// 总奖励累计
const totalAward = computed(() => {
  return props.historyList.reduce((acc: number, row: any) => acc + row.award, 0)
})
// 当前页展示数据
const showList = computed(() => {
  return props.historyList.slice((pageInfo.page - 1) * pageInfo.size, pageInfo.page * pageInfo.size)
})
// 记录总数
const total = computed(() => {
  return props.historyList.length
})
// 最大页数
const maxPage = computed(() => {
  return Math.ceil(total.value / pageInfo.size) || 1
})
// 切换分页，type: -1 上一页 / 1 下一页
function changePage(type: number) {
  pageInfo.page += type
  if (pageInfo.page < 1) {
    pageInfo.page = 1
  }
  if (pageInfo.page > maxPage.value) {
    pageInfo.page = maxPage.value
  }
}
</script>

<style scoped lang="scss">
/* 容器与基础布局 */
.historicalRecord .content_box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
}

/* 顶部统计条样式 */
.historicalRecord .content_box .action_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.historicalRecord .content_box .action_bar .quantity {
  margin-top: 0.3rem;
}

.historicalRecord .content_box .action_bar .quantity span:nth-child(1) {
  color: #86718C;
}

.historicalRecord .content_box .action_bar .quantity span:nth-child(2) {
  color: #FFD700;
}

/* 表头样式 */
.historicalRecord .content_box .tab_column {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3F2E4B;
  border-radius: 0.3rem 0.3rem 0rem 0rem;
  height: 1rem;
}

.historicalRecord .content_box .tab_column div {
  width: 100%;
  font-family: Arial;
  font-weight: 400;
  font-size: 0.42rem;
  text-align: center;
}

/* 列表区域 */
.historicalRecord .content_box .list {
  position: relative;
  background: #312734;
  min-height: 9rem;
  padding-top: 0.2rem;
  padding-bottom: 0.8rem;

  /* 列表行 */
  ul li {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    height: 1rem;
    line-height: 1rem;

    /* 每列内容 */
    div {
      width: 100%;
      text-align: center;
      font-family: Arial;
      font-weight: 400;
      font-size: 0.37rem;
      color: #86718C;

      &:nth-child(2) {
        color: #FFD700;
      }
    }

    &:nth-child(even) {
      background: #3F2E4B;
    }
  }
}

/* 空数据提示样式 */
.historicalRecord .content_box .list .no_data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.5rem;
  font-weight: 700;
  opacity: 0.6;
  color: var(--theme-neutral1);
}

/* 分页样式 */
.historicalRecord .content_box .paging {
  position: relative;
  margin-top: -0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.historicalRecord .content_box .paging .prev,
.historicalRecord .content_box .paging .next {
  cursor: pointer;
  padding: 10px;
  border-radius: var(--common-pagination-button-border-radius);
  background: var(--common-pagination-button-background);
}

.historicalRecord .content_box .paging .txt {
  padding: 0 22px;
  font-size: 0.32rem;
  color: var(--common-pagination-button-icon-color);
  font-weight: 700;
}
</style>
